<script setup>
import {CaretRight, UploadFilled} from '@element-plus/icons-vue'
import Codemirror from "codemirror-editor-vue3";
import "codemirror/addon/display/placeholder.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/addon/display/placeholder.js";
import "codemirror/theme/dracula.css";
import 'codemirror/theme/hopscotch.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/display/placeholder';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import {ref} from "vue";
import {doQuestion, getLikeState, getQuestionByIdUser, likeQuestion, runCode} from "@/api/question.js";
import {useRoute} from "vue-router";

const route = useRoute()
const question = ref({})

//点赞

const isOnclick = ref(false);
const isMark = ref(false);

const toggleLike = (questionId) => {
  isOnclick.value = !isOnclick.value
  isMark.value = !isMark.value
  //调用点赞接口
  likeQuestion(questionId, isMark.value)
}

// const userRankList = ref([])

const loadQuestion = async () => {
  const res = await getQuestionByIdUser(route.query.id)
  const state =  await getLikeState(route.query.id);
  console.log("点赞后"+state.data.data)
  isMark.value = state.data.data
  question.value = res.data.data;
}
loadQuestion();

const SandBoxVO = ref({})


const code = ref("    public static void main(String[] args) {\n" +
    "        String a = args[0];\n" +
    "        String b = args[1];\n" +
    "        System.out.print(Integer.parseInt(a)+Integer.parseInt(b));\n" +
    "    }");

let questionSubmitAddRequest = ref({
  language: "java",
  questionId: Number(route.query.id)
})

const submitQuestion = async () => {

  const res = await doQuestion({...questionSubmitAddRequest.value, code: code.value})
  console.log("提交后")
  console.log(res);
}

const runCodeByUser = async () => {
  const result = await runCode({...questionSubmitAddRequest.value, code: code.value})
  console.log(result)
  console.log("运行后")
  console.log(result.data.data)
  SandBoxVO.value = result.data.data
}

const cmOptions = ref({
  mode: 'javascript',
  theme: 'default',
  extraKeys: {
    Tab: 'autocomplete',
  },
  placeholder: 'Enter your code here...',
  lint: true,
  gutters: ['CodeMirror-lint-markers'],
  autocorrect: true,
  styleActiveLine: true,
  matchBrackets: true
})

const text = ref('编译成功')
const change = () => {

}



</script>

<template>
  <el-row>
    <el-col :span="12">
      <el-tabs type="border-card">
        <el-tab-pane label="题目描述">
          <h1>{{ question.title }}</h1>
          <div v-if="!isOnclick">
            <button @click="toggleLike(question.id)"
                    style="border: none; background: transparent; padding: 0; outline: none;">

              <img :src="isMark ? 'src/assets/up.png' : 'src/assets/no.png'" alt="Like">
              <span :class="isMark?'addColor':''">  {{ question.thumbNum == null ? 0 : question.thumbNum }}</span>
            </button>
          </div>
          <div v-else>
            <button @click="toggleLike(question.id)"
                    style="border: none; background: transparent; padding: 0; outline: none;">

              <img :src="isMark ? 'src/assets/up.png' : 'src/assets/no.png'" alt="Like">
              <span :class="isMark?'addColor':''">  {{ isMark ? question.thumbNum + 1 : question.thumbNum - 1 }}</span>
            </button>
          </div>
          <v-md-preview class="md-preview-container" :text="question.content"></v-md-preview>

          <!--          评论-->
          <div class="comment">
            <el-input v-model="commentInput" placeholder="请输入评论内容"></el-input>
            <el-button @click="addComment" type="primary">发表评论</el-button>

            <div class="comment-list">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-actions">
                  <el-button @click="toggleLike(comment.id)">{{ comment.likes }} 点赞</el-button>
                  <el-button @click="showReplyBox(comment.id)">回复</el-button>
                </div>

                <div v-if="comment.showReplyBox" class="reply-box">
                  <el-input v-model="comment.replyInput" placeholder="请输入回复内容"></el-input>
                  <el-button @click="addReply(comment)">提交回复</el-button>
                </div>

                <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">{{ reply.content }}</div>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="提交记录">Config</el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="12">
      <div class="headCode">
        <div class="flex items-center">
          <el-button type="default" plain> &lt;/&gt;代码</el-button>
          <div class="rightTitle">
            <el-button type="success" plain :icon="CaretRight" @click="runCodeByUser">运行</el-button>
            <el-button type="primary" plain :icon="UploadFilled" @click="submitQuestion">提交</el-button>
          </div>

        </div>
      </div>

      <!--      <el-page-header :icon="null">-->
      <!--        <template #extra>-->
      <!--          -->
      <!--        </template>-->
      <!--      </el-page-header>-->
      <Codemirror
          v-model:value="code"
          :options="cmOptions"
          border
          placeholder="test placeholder"
          :height="350"
          @change="change"
      />
      <!--      <el-card class="box-card">-->
      <!--        <div class="text item">{{ 'List item ' + o }}</div>-->
      <!--      </el-card>-->

      <el-tabs type="border-card">
        <el-tab-pane label="运行结果">
          <div>
            {{ SandBoxVO?.judgeInfo?.message }}
          </div>
          <!--          <v-md-preview :text="text" class="md-preview-container">-->
          <!--            -->
          <!--          </v-md-preview>-->
        </el-tab-pane>
        <el-tab-pane label="测试用例">
          输入用例
          <div v-for="item in SandBoxVO?.input">
            {{ item }}
          </div>
          输出用例
          <div v-for="item in SandBoxVO?.output">
            {{ item }}
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-col>
  </el-row>


</template>

<style scoped>
#QuestionShow {
}

.rightTitle {
  float: right;
}

.md-preview-container {
  height: 700px; /* 设置一个固定的高度 */
  overflow: auto; /* 添加滚动条样式 */
}

/deep/ .el-table .first-place {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

/deep/ .el-table .second-place {
  --el-table-tr-bg-color: var(--el-color-info-light-9);
}

/deep/ .el-table .third-place {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}


/* 你可以在这里添加一些额外的样式来美化按钮和图标 */
button {
  /* 样式设置 */
}

img {
  /* 图标样式设置，例如大小、间距等 */
  width: 30px; /* 举例 */
  height: 30px; /* 举例 */
  margin-right: 5px; /* 举例 */
}

.addColor {
  color: red;
  font-size: 18px;
  font-weight: bold;
}
</style>
